<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="">
		*{
			margin: 0;
			height: 0;
		}
		.one{
			width: 400px;
			height: 400px;
			background-color: red;
		}
		.two{
			width: 100px;
			height: 100px;
			background-color: blue;
			margin-top: 30px;
		}
		div{
			width: 200px;
			height: 200px;
		}
		.a{
			background-color: red;
			margin-bottom: 150px;
		}

	</style>
</head>
<body>

<!-- 同级之间  两个边距相遇  他们两个之间的距离是  最大值的那个  而不是叠加 -->

<!-- 父元素的第一个子元素如果设置上外边距  同时父元素没有设置border padding 那么将会影响父级一块移动 -->
<!-- 解决方案：
		1.父级设置有效的padding  或者  border
		2.父级设置 overflow:hidden(超出隐藏)
		3.父级或者子元素设置使用了浮动或者定位
 -->
<div class="a"></div>
<div class="b"></div>

</body>
</html>